<template>
	<div id="Lorin_goods_list">
		<router-view></router-view>
		<div class="goodsList">
			<div class="listItem" v-for='item in goodsList'>
				<i class="el-icon-goods"></i>
				<i class="el-icon-star-off"></i>
				<img :src="'http://129.204.193.180:8080' + item.url">
				<p class="name">{{item.name}}</p>
				<p class="price" v-if='item.price!=0'>{{item.price}}元</p>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default{
		data() {
			return{
				goodsList: []
			}
		},
		methods: {
			getList: function(){
					this.$http.get('http://129.204.193.180:8080/getList?kind=' + this.$route.query.kind).then(function(res) {
					this.goodsList = JSON.parse(res.body.resBody.data);
				})
			}
		},
		created() {
			this.getList();
		},
		watch: {
			$route(to, from){
				this.getList();
			}
		}
	}
</script>

<style scoped lang="less">
	@keyframes hideIndex{
   		0%{ opacity: 0;}
    	100%{opacity: 1;}
	}
	#Lorin_goods_list{
		overflow: hidden;
		.goodsList{
			margin-top: 40px;
			width:100%;
			.listItem{
				position: relative;
				float:left;
				width:21%;
				height:383px;
				margin: 0 2% 20px 2%;
				padding: 40px 20px 20px 20px;
				background-color: #fff;
				box-shadow: 3px 5px 10px 10px #f5f5f5;
				text-align: center;
				img{
					width:70%;
					height:60%;
				}
				p{text-align: center;font-size: 14px;}
				.name{
					margin-top: 40px;
					color: #424242;
				}
				.price{color:#ff6700;}
				i{position: absolute;font-size: 20px;top:15px;display: none;transition: display 0.5s ease;}
				i:hover{color:#ff6700;}
				i:nth-of-type(1){
					right:20px;
				}
			}
			.listItem:hover{
				cursor: pointer;
				i{animation: hideIndex 0.5s;display: block;}
			}
		}
	}
	@media screen and (max-width:1024px) {
		#Lorin_goods_list > .goodsList > .listItem{
			width: 40%;
			height:250px;
			margin: 10px 5%;
			img{width:55%;height:48%;}
		}
	}
</style>